<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>钟表效果</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .clock {
            position: relative;
            margin: 0 auto;
            width: 600px;
            height: 600px;
            background: url(./imgs/clock.jpg) no-repeat center;
            overflow: hidden;
        }

        .clock>div {
            position: absolute;
            top: 0;
            left: 0;
            width: 600px;
            height: 600px;
        }

        .clock>.hour {
            background: url(./imgs/hour.png) no-repeat center;
        }

        .clock>.minute {
            background: url(./imgs/minute.png) no-repeat center;
        }

        .clock>.seconds {
            background: url(./imgs/second.png) no-repeat center;
        }
    </style>

    <script>
        window.onload = function () {
            function $(selecter) {
                return document.querySelector(selecter)
            }

            function fn() {
                var currentTime = new Date();
                // 获取毫秒数
                var ms = currentTime.getMilliseconds();
                 // 获取到当前的秒数
                 var seconds = currentTime.getSeconds() + ms/1000
                  // 获取到当前的分钟数
                var minutes = currentTime.getMinutes() + seconds/60
                // 获取到当前的小时数
                var hour = currentTime.getHours()+minutes/60
               
               

                // 一小时旋转30度
                $('.hour').style.transform = "rotate(" + hour * 30 + "deg)"
                // 一分钟旋转6度
                $('.minute').style.transform = "rotate(" + minutes * 6 + "deg)"
                //  一秒钟旋转6度
                $('.seconds').style.transform = "rotate(" + seconds * 6 + "deg)"
            }

            setInterval(fn, 1000)

        }
    </script>
</head>

<body>
    <div class="clock">
        <div class="hour"></div>
        <div class="minute"></div>
        <div class="seconds"></div>
    </div>
</body>

</html>